import React, { useState } from 'react'
import './index.css'

export default function Item({ todo, done, id, setTodoList, todoList }) {
    //isActive状态用来保存li的active类是否添加和按钮的display状态
    const [isActive, setIsActive] = useState(false)

    //鼠标移入移出的事件函数
    const mouseHandle = (bool) => {
        //外层函数用来接收参数,返回的函数是真正的事件函数
        return () => {
            setIsActive(!isActive)
        }
    }


    //多选框触发改变的事件函数
    const checkChangeHandle = (e) => {
        // console.log(e.target.checked); //e.target.checked是多选框点击期望变成的值
        //不能把以前的值修改以后再设置回去,这个对于react来说,接收的地址值没有发生变化,所以react不会重新渲染
        const newTodoList = todoList.map((item) => {
            if (item.id === id) {
                //如果符合条件,我们执行一个约定 尽量不要修改state的值,我们可以重新得到一个新的值
                return { ...item, done: e.target.checked }
            }
            return { ...item }
        })

        //把改过done的newTodoList设置到state中页面重新渲染
        setTodoList(newTodoList);
    }

    //删除事件的回调函数
    const deleteHandle = () => {
        const newTodeList = todoList.filter((item) => {
            return item.id !== id
        })

        setTodoList(newTodeList)
    }


    return (
        <li onMouseEnter={mouseHandle(true)} onMouseLeave={mouseHandle(false)} className={isActive ? "active" : ""}>
            <label>
                <input type="checkbox" checked={done} onChange={checkChangeHandle} />
                <span>{todo}</span>
            </label>
            <button onClick={deleteHandle} className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
        </li>
    )
}
